<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>高校丘比特</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<body>
<img src="/img/indexBackground.jpg" alt="" class="index-body">
<div style="position: absolute;z-index: 2;width: 100%">
    <div th:include="common/header"></div>
    <p style="color: coral;font-size: 38px;text-align: center;margin-bottom: 0px">本站功能</p>
    <p style="font-size: 17px;text-align: center">这里满足您交友需求的一切</p>
    <div class="ui container" style="width: 78%">
        <div class="ui grid divided center aligned" id="three-function-icon" style="margin-top: 40px">
            <div class="five wide column">
                <a th:if="${session.loginUser!=null}" th:href="@{/wechat/manage(id=${session.loginUser.id})}" target="_blank" style="padding-left: 37px">
                    <i class="ui wechat icon massive" style="color: #04BE02"></i>
                    <div class="icon-name" style="text-align: center">我的微信管理</div>
                </a>
                <a th:if="${session.loginUser==null}" th:href="@{/user}" target="_blank" style="padding-left: 37px">
                    <i class="ui wechat icon massive" style="color: #04BE02"></i>
                    <div class="icon-name" style="text-align: center">我的微信管理</div>
                </a>
                <div style="margin-top: 20px;text-align: center">
                    <p class="description">查看、修改已投放的微信和已获取的微信</p>
                </div>
            </div>
            <div class="six wide column">
                <a th:if="${session.loginUser!=null}" href="#" style="padding-left: 37px" onclick="savaFun()">
                    <i class="paper plane icon massive red" style="padding-left: 20px"></i>
                    <div class="icon-name" style="text-align: center">投放微信</div>
                </a>
                <a th:if="${session.loginUser==null}" th:href="@{/user}" style="padding-left: 37px">
                    <i class="paper plane icon massive red" style="padding-left: 20px"></i>
                    <div class="icon-name" style="text-align: center">投放微信</div>
                </a>
                <div style="margin-top: 20px;text-align: center">
                    <p class="description">使用此功能您可将自己或朋友的微信投放到本站台，以便他人可以获取到此微信</p>
                </div>
            </div>
            <div class="five wide column">
                <a th:if="${session.loginUser!=null}" href="#" style="padding-left: 37px" onclick="takeFun()">
                    <i class="american sign language interpreting icon massive teal"></i>
                    <div class="icon-name" style="text-align: center">我要交朋友</div>
                </a>
                <a th:if="${session.loginUser==null}" th:href="@{/user}" style="padding-left: 37px">
                    <i class="american sign language interpreting icon massive teal"></i>
                    <div class="icon-name" style="text-align: center">我要交朋友</div>
                </a>
                <div style="margin-top: 20px;text-align: center">
                    <p class="description">该功能可使您随机获取一个已投放到本站的微信号，您可指定性别、学校和年级</p>
                </div>
            </div>
        </div>
    </div>
</div>
<!--存放微信模态框-->
<div class="ui modal first">
    <i class="close icon"></i>
    <div class="header">
        投放微信
    </div>
    <form class="ui form" id="saveForm" method="get" action="/pay/confirm" th:action="@{/pay/confirm}">
        <div class="ui segment center aligned">
            <div class="ui segment left aligned " style="margin-left: 30%;width: fit-content">
                <i class="ui exclamation icon red"></i>
                <strong>请勿使用虚假微信号！</strong>
                <br>
                <br>
                <i class="ui exclamation icon red"></i>
                <strong>否则管理员将删除该微信，并对您进行封号警告！</strong>
            </div>
            <div class="ui two column divided grid">
                <div class="column">
                    <div class="content">
<!--                        <input th:if="${session.loginUser!=null}" type="hidden" name="userId" th:value="${session.loginUser.id}">-->
                        <div class="inline field rows">
                            <div class="label">微信</div>
                            <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                            <input class="text" name="wechat" placeholder="请输入" style="width: 210px" id="wechat"/>
                        </div>
                        <div class="rows">
                            <div class="label">性别</div>
                            <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                            <div class="text">
                                <select id="sex" name="sex">
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                                </select>
                            </div>
                        </div>
                        <div class="rows">
                            <div class="label">省份</div>
                            <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                            <div class="text"><select id="province" name="province"></select></div>
                        </div>
                        <div class="rows">
                            <div class="label">城市</div>
                            <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                            <div class="text"><select id="city" name="city"></select></div>
                        </div>
                        <div class="rows">
                            <div class="label">学校</div>
                            <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                            <div class="text"><select id="school" name="school"></select></div>
                        </div>
                        <div class="rows">
                            <div class="label">年级</div>
                            <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                            <div class="text">
                                <select id="grade" name="grade">
                                    <option value="大一">大一</option>
                                    <option value="大二">大二</option>
                                    <option value="大三">大三</option>
                                    <option value="大四">大四</option>
                                    <option value="研一">研一</option>
                                    <option value="研二">研二</option>
                                    <option value="研三">研三</option>
                                    <option value="博士生">博士生</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="column" >
                    <div class="rows">
                        <div class="label">想说的话</div>
                        <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                        <div class="text">
                            <textarea name="description" maxlength="40" placeholder="交友宣言：交朋友、吐槽、找考研伙伴、一起上分、一起运动......【不超过80个字符】"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="actions">
        <div class="ui positive right labeled icon button" onclick="saveBtnFun()">
            投放
            <i class="paper plane outline icon"></i>
        </div>
    </div>
</div>
<!--获取微信模板-->
<div class="ui modal second">
    <i class="close icon"></i>
    <div class="header">
        获取微信
    </div>
    <form class="ui form" id="takeForm" method="post" action="/pay/takeconfirm" th:action="@{/pay/takeconfirm}">
        <div class="ui segment center aligned">
            <div class="ui segment left aligned " style="margin-left: 30%;width: fit-content">
                <i class="ui exclamation icon red"></i>
                <strong>请勿将获得的微信作用于不正当的途径</strong>
                <br>
                <br>
                <i class="ui exclamation icon red"></i>
                <strong>否则管理员将删除该微信，并对您进行封号警告！</strong>
            </div>
            <div class="ui two column divided grid">
                <div class="column">
                    <div class="content">
                        <!--<input th:if="${session.loginUser!=null}" type="hidden" name="userId" th:value="${session.loginUser.id}">-->
                        <div class="rows">
                            <div class="label">性别</div>
                            <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                            <div class="text">
                                <select id="sex1" name="sex">
                                    <option value="1">男</option>
                                    <option value="0">女</option>
                                </select>
                            </div>
                        </div>
                       <!-- <div class="rows">
                            <div class="label">学校</div>
                            <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                            <input class="text" name="wechat" placeholder="请输入" style="width: 210px" id="school1"/>
                        </div>
                        <div class="rows">
                            <div class="label">年级</div>
                            <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                            <div class="text">
                                <select id="grade1" name="grade">
                                    <option value="大一">大一</option>
                                    <option value="大二">大二</option>
                                    <option value="大三">大三</option>
                                    <option value="大四">大四</option>
                                    <option value="研一">研一</option>
                                    <option value="研二">研二</option>
                                    <option value="研三">研三</option>
                                    <option value="博士生">博士生</option>
                                    <option value="其他">其他</option>
                                </select>
                            </div>
                        </div>-->
                    </div>
                </div>
                <div class="column" >
                    <div class="rows">
                        <div class="label" style="color:red">注意！</div>
                        <div style="padding-left:0px;padding-right:5px;display:inline-block;color: #ccc;text-align: center;font-weight: lighter;">|</div>
                        <div class="text">
                            <text name="description" maxlength="40">光芒捧起你的脸 我飞在云层间 狂奔向你不停歇 你说最好的人会到身边 此刻我也这样想</text>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <div class="actions">
        <div class="ui positive right labeled icon button" onclick="takeBtnFun()">
            获取
            <i class="paper plane outline icon"></i>
        </div>
    </div>
<div/>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script th:src="@{/js/AllSchool.js}"></script>
<script>
    function savaFun(){
        $(".first")
            .modal("show")
            .modal('setting','closable',false)
    }
    function takeFun(){
        $(".second")
            .modal("show")
            .modal('setting','closable',false)
    }
    //获取按钮
    function takeBtnFun(){
        $(".form").submit();
            // let formatter = $("#saveForm").serialize();
            // $.ajax({
            //     url: "/pay/confirm",
            //     type: "POST",
            //     data: formatter,
            //     dataType: "json",
            //     success: function (result) {
            //         alert(result)
            //     }
            // })
    }
    //投放按钮
    function saveBtnFun(){
        let wechat = $("#wechat").val();
        if (wechat !== "") {
            $(".form").submit();
            // let formatter = $("#saveForm").serialize();
            // $.ajax({
            //     url: "/pay/confirm",
            //     type: "POST",
            //     data: formatter,
            //     dataType: "json",
            //     success: function (result) {
            //         alert(result)
            //     }
            // })
        } else {
            alert("请输入微信");
        }
    }
    //下拉框
    $('.ui.dropdown').dropdown();
</script>
<!--高校下拉列表-->
<script>
    window.onload=function(){
        var provinceArray = "";
        var provicneSelectStr = "";
        for(var i=0,len=province.length;i<len;i++){
            provinceArray = province[i];
            provicneSelectStr = provicneSelectStr + "<option value='"+provinceArray[0]+"'>"+provinceArray[1]+"</option>"
        }
        $("#province").html(provicneSelectStr);

        var selectCity = $("#province").val();
        var citylist=city[selectCity];
        var cityArray = "";
        var citySelectStr = "";
        for(var i=0,len=citylist.length;i<len;i++){
            cityArray = citylist[i];
            citySelectStr = citySelectStr + "<option value='"+cityArray[0]+"'>"+cityArray[1]+"</option>"
        }
        $("#city").html(citySelectStr);

        var selectschool = $("#city").val();
        var schoolUlStr = "";
        var schoolListStr = allschool[selectschool];
        for(var i=0,len=schoolListStr.length;i<len;i++){
            schoolUlStr = schoolUlStr + "<option >"+schoolListStr[i][2]+"</option>";
        }
        schoolUlStr = schoolUlStr + "<option value='999'>其它</option>";
        $("#school").html(schoolUlStr);
        //省切换事件
        $("#province").change(function(){
            var selectCity = $("#province").val();
            var citylist=city[selectCity];
            var cityArray = "";
            var citySelectStr = "";
            if(citylist!=null){
                for(var i=0,len=citylist.length;i<len;i++){
                    cityArray = citylist[i];
                    citySelectStr = citySelectStr + "<option value='"+cityArray[0]+"'>"+cityArray[1]+"</option>"
                }
            }

            $("#city").html(citySelectStr);
            $("#school1").show();
            $("#school2").hide();
            var selectschool = $("#city").val();
            var schoolUlStr = "";
            var schoolListStr = allschool[selectschool];
            for(var i=0,len=schoolListStr.length;i<len;i++){
                schoolUlStr = schoolUlStr + "<option >"+schoolListStr[i][2]+"</option>";
            }
            schoolUlStr = schoolUlStr + "<option value='999'>其它</option>";
            $("#school").html(schoolUlStr);
        });
        //切换城市事件
        $("#city").change(function(){
            $("#school1").show();
            $("#school2").hide();
            var selectschool = $("#city").val();
            var schoolUlStr = "";
            var schoolListStr = allschool[selectschool];
            for(var i=0,len=schoolListStr.length;i<len;i++){
                schoolUlStr = schoolUlStr + "<option >"+schoolListStr[i][2]+"</option>";
            }
            schoolUlStr = schoolUlStr + "<option value='999'>其它</option>";
            $("#school").html(schoolUlStr);
        });
        $("#school").change(function(){
            if($("#school").val()=="999"){
                $("#school1").hide();
                $("#school2").show();
            }
        });
        $("#second").show();
        $("#restart").css("backgorund","url('assets/images/chongxintijiao.jpg') no-repeat");
    }

</script>
</body>
</html>
